
<template>
  <div class="container">
    <div class="background"></div>
      <div class="center">
        <div class="center1">
          <div class="header  flex">
            <ul class="header-nav-left flex">
              <li><RouterLink to="/" active-class="active">首页</RouterLink></li>
              <li class="dropdown-toggle">文档分类
                <ul class="dropdown-menu">
                  <li class="dropdown-menu-f">
                    一年级下册
                    <ul>
                      <li class="dropdown-menu-s">语文</li>
                      <li class="dropdown-menu-s">数学</li>
                      <li class="dropdown-menu-s">英语</li>
                    </ul>
                  </li>
                  <li class="dropdown-menu-f">
                    二年级下册
                    <ul>
                      <li class="dropdown-menu-s">语文</li>
                      <li class="dropdown-menu-s">数学</li>
                      <li class="dropdown-menu-s">英语</li>
                    </ul>
                  </li>
                  <li class="dropdown-menu-f">
                    三年级下册
                    <ul>
                      <li class="dropdown-menu-s">语文</li>
                      <li class="dropdown-menu-s">数学</li>
                      <li class="dropdown-menu-s">英语</li>
                    </ul>
                  </li>
                  <li class="dropdown-menu-f">
                    四年级下册
                    <ul>
                      <li class="dropdown-menu-s">语文</li>
                      <li class="dropdown-menu-s">数学</li>
                      <li class="dropdown-menu-s">英语</li>
                    </ul>
                  </li>
                  <li class="dropdown-menu-f">
                    五年级下册
                    <ul>
                      <li class="dropdown-menu-s">语文</li>
                      <li class="dropdown-menu-s">数学</li>
                      <li class="dropdown-menu-s">英语</li>
                    </ul>
                  </li>
                  <li class="dropdown-menu-f">
                    六年级下册
                    <ul>
                      <li class="dropdown-menu-s">语文</li>
                      <li class="dropdown-menu-s">数学</li>
                      <li class="dropdown-menu-s">英语</li>
                    </ul>
                  </li>
                </ul>
              </li>

            </ul>
            <ul class="header-nav-right flex">
              <li><svg-icon class="header-nav-right-icon" name="upload"></svg-icon>上传文档</li>
              <li><svg-icon class="header-nav-right-icon" name="VIP"></svg-icon>加入vip</li>
              <li><svg-icon class="header-nav-right-icon" name="login"></svg-icon>登录</li>
            </ul>
            <!-- 搜索框   -->
            <div class="search flex" >
              <input type="search" placeholder="请输入关键词">
              <SvgIcon class="search-icon" name="search"></SvgIcon>
              <!--        <el-icon>-->
              <!--          <search />-->
              <!--        </el-icon>-->

            </div>
          </div>

          <div class="notice flex">
            <div class=" flex notice-container">
              <SvgIcon class="notice-icon" name="喇叭"></SvgIcon>
              <span class="notice-context">欢迎家长加入xxxxxxxx小学资料库</span>
            </div>
          </div>

          <div class="second-nav flex">
            <div class=" flex second-nav-container">
              <span>会员兑换</span>
              <span>文档下载</span>
              <span>个人中心</span>
            </div>
          </div>

          <div class="content flex ">
            <div class="content-container flex ">
              <div class="content-main" >
                <div class="main ">
                  <div class="main-top flex">
                    <p>最新文档</p>
                    <p>查看更多>></p>
                  </div>
                  <ul class="main-list flex">
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                    <li>
                      <div class="cover">
                        <img src="@/assets/img/test.jpg" alt="">
                      </div>
                      <span>三下数学期末复习五大专项应用题训练（含答案解析66页）</span>
                      <div class="property flex">
                        <div>2025-06-03</div>
                        <div>520</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="content-side" >
                <div class="vip flex">
                  <div class="flex login-info">
                    <SvgIcon class="login-info-icon" name="role"></SvgIcon>
                    <span class="login-info-text">
                登录享以下特权
              </span>
                  </div>

                  <div class="flex user-info">
                    <ul class="user-info-items flex">
                      <li>
                        <span>0</span>
                        <span>文档</span>
                      </li>
                      <li>
                        <span>0</span>
                        <span>粉丝</span>
                      </li>
                      <li>
                        <span>0</span>
                        <span>知币</span>
                      </li>
                    </ul>
                  </div>

                  <div class="flex vip-privilege">
              <span class="flex vip-privilege-text ">
                <ul>
                  <li>
                    <svg-icon name="sync" class="vip-privilege-icon"></svg-icon>
                    多端同步记录
                  </li>
                  <li><svg-icon name="download" class="vip-privilege-icon"></svg-icon>高速下载文档</li>
                  <li><svg-icon name="Tools" class="vip-privilege-icon"></svg-icon>免费文档工具</li>
                  <li><svg-icon name="share" class="vip-privilege-icon"></svg-icon>分享文档赚钱</li>
                  <li><svg-icon name="gift" class="vip-privilege-icon"></svg-icon>每日登录抽奖</li>
                  <li><svg-icon name="fuwu" class="vip-privilege-icon"></svg-icon>优质衍生服务</li>
                </ul>
                <span class="login-button">立即登录</span>
              </span>
                  </div>
                </div>
                <div class="dt dt-container flex">
                  <div class="text flex">
                    <span>用户动态</span>
                  </div>
                  <div class="content">
                    <ul>
                      <li>
                        <span><SvgIcon class="avatar" name="visitor"></SvgIcon>五环</span>
                        <span>一分钟前</span>
                        <span>下载xxxxxxxx</span>
                      </li>
                      <li>
                        <span><SvgIcon class="avatar" name="visitor"></SvgIcon>123</span>
                        <span>一分钟前</span>
                        <span>下载xxxxxxxx</span>
                      </li>
                      <li>
                        <span><SvgIcon class="avatar" name="visitor"></SvgIcon>123</span>
                        <span>一分钟前</span>
                        <span>下载xxxxxxxx</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="recommend flex">
            <div class="recommend-container flex ">
              <div class="left flex" >
                <div class="recommend-text">推荐文档</div>
                <div class="doc-top flex">
                  <div>热门文档</div>
                  <div class="select">
                    <ul>
                      <li>1</li>
                      <li>2</li>
                      <li>3</li>
                    </ul>
                  </div>
                  <div class="doc-top-info flex">
                    <ul>
                      <li>四年级下册语文重点必背内容汇总</li>
                      <li>四年级下册语文重点必背内容汇总</li>
                      <li>四年级下册语文重点必背内容汇总</li>
                      <li>四年级下册语文重点必背内容汇总</li>
                      <li>四年级下册语文重点必背内容汇总</li>
                      <li>四年级下册语文重点必背内容汇总</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="right" >
                <div>创作排行</div>
                <div class=""></div>
              </div>

            </div>
          </div>
        </div>

      </div>

    </div>


</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'

</script>

<style scoped>
.container{
  position: relative;
  width: 100%;
  min-width: 1280px;
}
.center{
  width: 100%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: safe center;
}
.center1{
  display: flex;
  width: 1280px;
  flex-direction: column;
  justify-content: center;

}
.flex {
  display: flex;
}

.header {
  width: 100%;
  height: 300px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;

}
.background{
  height: 300px;
  background-size: cover;
  background-image: url("@/assets/img/R-C1.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.dropdown-toggle{
  position: relative;
}

.dropdown-toggle:hover .dropdown-menu {
  visibility: visible;
  transition: 0.5s ease-in-out ;
  opacity: 1;
}
.dropdown-menu{
  position: absolute;
  top:45px;
  left:-28px;
  background-color: white;
  border: 1px solid transparent;
  width: 280px;
  visibility: hidden;
  opacity: 0;
  border-radius: 5px;
  display: block;
  padding: 0 10px 0 10px;
}

.dropdown-menu::after{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -10px;
  right: 180px;
  border-bottom: 10px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.dropdown-menu-f{
  border-bottom: 1px solid grey;
  color: cornflowerblue;
  padding: 10px 0 10px 0;
  font-size: 16px;
  font-weight: bold;
}
.dropdown-menu-f>ul{
  display: flex;
  justify-content: left;
  padding-top: 6px;
  font-weight: normal;
}

.dropdown-menu-s{
  margin-right: 20px;
  color: grey;
  font-size: 14px;
}

.header-nav-right{
  justify-content: right;
}

.header-nav-right>li,
.header-nav-left>li {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-left: 20px;
  height: 50px;
}

.header-nav-right li:first-child,
.header-nav-left li:first-child {
  margin-left: 0;
}

.header-nav-right-icon{
  width: 1.2em;
  height: 1.2em;
  fill: white;
}

input {
  width: 450px;
  height: 40px;
  background-color: mintcream;
  font-size: 1em;
  border: 0  solid #af2929;
  padding-left: 10px;
  border-radius: 10px 0  0 10px ;
}

.search {
  width: 100%;
  height: 250px;
  justify-content: center;
  align-items: center;
  font-size: 16px ;
  margin-top: -20px;
}

input:hover {
  box-shadow: 0 0 5px #2c3e50;
  transition: 0.2s linear;
  border: 2px;
}

input:focus {
  box-shadow: 0 0 5px #2c3e50;
  transition: 0.2s linear;
  outline: none;
  border: 2px;
}

.search-icon {
  height: 40px;
  width: 30px;
  color: cornflowerblue;
  background-color: mintcream;
  border-radius: 0 10px 10px 0 ;
  padding-right: 5px;
}

.notice {
  margin-top: -20px;
  height: 40px;
  justify-content: center;
}

.second-nav {
  height: 50px;
  margin-top: 20px;
  justify-content: center;
}

.notice-container {

  align-items: center;
}

.notice-container,
.second-nav-container {
  width: 100%;
  font-size: 15px;
  color: rgb(143, 139, 139);
  border: 1px solid mintcream;
  border-radius: 5px;
  background-color: mintcream;
  box-shadow: 0 0 5px #2c3e50;
}

.second-nav-container {
  justify-content: space-between;
  align-items: center;
}

.second-nav-container span:first-child {
  margin-left: 20px;
  color: cornflowerblue;
}

.second-nav-container span:nth-child(2) {
  color: orange;
}

.second-nav-container span:last-child {
  margin-right: 20px;
  color: green;
}

.notice-icon {
  width: 25px;
  margin-right: 15px;
  fill: orangered !important;
}

.content {
  justify-content: center;
}

.content-container {
  border-radius: 5px;
  margin-top: 20px;
  height: 690px;
  background-color: #f2f2f2;
  justify-content: space-between;
}

.main-top {
  height: 50px;
  align-items: center;
  padding: 10px 15px;
  justify-content: space-between;
  box-sizing: border-box;
}

.main-top span:first-child {
  font-size: 20px;
}

.main-list {
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.content .main {
  width:950px;
  box-sizing: border-box;
  border: 1px solid cornflowerblue;
  height: 100%;
  box-shadow: 0 0 5px #2c3e50;
}

.content .main li {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  width: 160px;
}

.content .cover{
  overflow: hidden;
}

.main-list li:hover {
  cursor: pointer;
}

.main-list img{
  width: 100%;
  vertical-align:bottom;
  transition: 0.3s all linear;
}

.main-list li img:hover{
  transform:scale(1.3)
}

.main-list span {
  margin-top: 7px;
  width: 100%;
  height: 45px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.content .main-list .property {
  font-size: 13px;
  color: gray;
  flex-direction: row;
  justify-content: space-between;
}

.vip:hover{
  cursor: pointer;
}
.vip {
  box-sizing: border-box;
  height: 280px;
  flex-direction: column;
  align-items: center;
  border: 1px solid white;
  border-radius: 5px;
  box-shadow: 0 0 5px #2c3e50;
}

.login-info {
  height: 45px;
  margin-top: 20px;
}

.login-info,
.user-info,
.vip-privilege {
  width: 260px;
  align-items: center;
  justify-content: center;
}
.vip-privilege-icon{
  width: 1.3em;
  height: 1.3em;
  color: #ccaa6c;
  fill: #ccaa6c;
}
.login-info-text {
  color: #75532e;
  /*//margin-left: 5px;*/
  font-size: 16px;
  font-weight: bold;
  flex-direction: column;
  align-items: center;
}

.login-info-icon {
  width: 30px;
  fill: gold;
}

.user-info-items {
  font-size: 13px;
  width: 70%;
  justify-content: space-around;
  align-items: center;
  color: grey;
}

.user-info-items li {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
}

.vip-privilege {
  margin-top: 15px;
  background-color: #fff3d5;
  height: 165px;
  width: 100%;
  border-radius: 10px;
}

.vip-privilege-text {
  display: flex;
  font-size: 16px;
  font-weight: bold;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
}

.vip-privilege-text ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: -20px;
}

.vip-privilege-text ul li {
  display: flex;
  font-size: 14px;
  margin-top: 14px;
  font-weight: normal;
  align-items: center;
}

.login-button {
  margin-top: 8px;
  padding: 3px 60px;
  background-color: #eec072;
  border-radius: 5px;
  color: white;
}

.dt {
  height: 400px;
  margin-top: 10px;
  padding: 10px 15px;
  box-shadow: 0 0 5px #2c3e50;
  box-sizing: border-box;
  flex-direction: column;
}

.dt .text {
  justify-content: flex-start;
}

.dt .content .avatar{
  width: 25px;
  height: 25px;
  vertical-align: text-bottom;
}

.dt-container .content ul {
  height: 370px;
  display: flex;
  flex-direction: column;
}

.dt-container .content li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(105, 105, 105, 0.21);
  flex-wrap: wrap;
  align-items: center;
  height: calc(100% / 3.5);
}


.dt-container .content li span:nth-child(2) {
  font-size: 12px;
  color: #c1c2c2;
}

.dt-container .content li span:last-child {
  width: 100%;
  padding-left: 50px;
  margin-top: -35px;
  font-size: 14px;
  color: #c1c2c2;
}
.recommend{
  justify-content: center;
  margin-top: 20px;
}
.recommend-container{
  height: 390px;
  justify-content: space-between;
}
.recommend-text {
  width: 400px;
}
.recommend-container .left{
  width: 950px;
  padding: 10px 15px;
  font-size: 20px;
  box-sizing: border-box;
  border: 1px solid cornflowerblue;

}
.recommend-container .right{
  width: 330px;
  padding: 10px 15px;
  font-size: 20px;
  box-sizing: border-box;
  border: 1px solid cornflowerblue;
 }
.doc-top {
  justify-content: space-between;
  width: 400px;
  align-items: baseline;
  flex-wrap: wrap;
  align-content: flex-start;
}

.doc-top .select ul{
  display: flex;
  width: 300px;
}
.doc-top .select ul li{
  padding:  0 20px;
  border: 1px solid #2c3e50;
  margin-right: 10px;
  border-radius: 5px;
  font-size: 14px;
  background-color: #f5f5f5;
}
.doc-top-info{
  width: 400px;
  font-size: 16px;
}
.doc-top-info ul li{
  margin-top: 10px;
}
</style>
